import {
    Card,
    Breadcrumb,
    Form,
    Button,
    Radio,
    Input,
    Upload,
    Space,
    Select,
    message
  } from "antd";
  
  import { PlusOutlined } from "@ant-design/icons";
  
  import ReactQuill from "react-quill";
  import "react-quill/dist/quill.snow.css";
  
  // 导入 Link 组件
  import { Link, useSearchParams } from "react-router-dom";
  // 导入样式文件
  import "./index.scss";
  import { useEffect, useState} from "react";
import { getChannelApi,createArticleApi,updateArticleApi } from "@/apis/article";
  //import { createArticleApi,getArticleByIdApi,updateArticleApi} from "@/apis/article";
  
  // 导入hooks
  //import useChannel  from "@/hooks/useChannel";
  
  const { Option } = Select;
  
  export default function Publish() {
    // 获取频道列表
    //let channelList = useChannel();
  
    const [channelList,setChannelList] = useState([])
    useEffect(()=>{
        const getChannelList = async () => {
            const res = await getChannelApi()
           
            setChannelList(res.data.channels)
        }
        getChannelList()
    },[])
  
    // 图片列表
    const [imageList, setImageList]   = useState([]); 
    // 图片上传回调
     const onUploadChange = (info) => {
      // 图片上传成功后，将图片地址添加到图片列表中
      setImageList(info.fileList);
     }
  
  
     
  
     // 图片类型， 0-无图， 1-单图， 3-三图
     const [imageType, setImageType] = useState(0);
      // 单选按钮回调函数
     const onRadioChange = (e) => {
     
       setImageType(e.target.value);
     }
  
  
    // 表单提交
    const onFinish = (formData) => {
      console.log(formData);
      // 校验封面类型 imageType 是否和图片数量是否相等
      if(imageType !== imageList.length){
         return message.error('封面类型和图片数量不匹配');
      }
  
      const { title, content, channel_id } = formData;
      // 按接口文档的格式处理数据
      const reqData = {
        title, // 标题
        content, // 内容
        cover: {
          // 封面
          type: imageType, // 封面类型：1-图片，0-无图
          // 封面图片列表
          // 这里逻辑是新增文章时的逻辑
          images: imageList.map(item => {
             if (item.response) {
              return item.response.data.url
             }else{
               return item.url
             }
          }), 
        },
        channel_id // 频道id
      };
  
      // 调用创建文章接口
      if (articleId) {
        // 编辑文章
        updateArticleApi(reqData)
      }else{
        // 新增文章
        createArticleApi(reqData)
      }
     
  
      // 跳转到文章详情页
    };
  
    // useSearchParams 用于获取url参数
    const [searchParams] = useSearchParams();
    // 获取文章id
    const articleId = searchParams.get("id");
    const [form] = Form.useForm();
  
    //组件渲染完毕后，获取文章数据
    useEffect(() => {
      // 通过文章id数据
     const getArticleId = async () => {
         //let res = await getArticleByIdApi(articleId);
         //console.log("res.data",res.data)
         //const data = res.data;
         //const {cover} = data
         // 设置表单初始值
         form.setFieldsValue({
         // ...data,
          /*
           setFieldsValue 需要的数据类型是： type : 1 , 而 res.data的数据类型是： cover :{ type: 1, images: []}
          */ 
         // type: cover.type,
         });
         // 设置图片类型
        // setImageType(cover.type);
        // setImageList(cover.images.map(item => {
        //  return {url:item}
        // }));
     }
  
      // 如果 文章id存在，则调用获取文章数据接口
     if (articleId) {
         getArticleId();
     }
    
  
    }, [articleId,form]);
  
  
    return (
      <div className="publish">
        <Card
          title={
            <Breadcrumb
              items={[
                { title: <Link to={"/"}>首页</Link> },
                { title: articleId ? "编辑文章" : "发布文章" },
              ]}
            />
          }
        >
          <Form
            labelCol={{ span: 4 }}
            wrapperCol={{ span: 16 }}
            // 表单初始值
            initialValues={{ type: 0}}
            // 表单提交后回调函数
            onFinish={onFinish}
            form={form}
          >
  
            {/* 文章标题 */}
            <Form.Item
              label="标题"
              name="title"
              rules={[{ required: true, message: "请输入文章标题" }]}
            >
              <Input placeholder="请输入文章标题" style={{ width: 400 }} />
            </Form.Item>
  
            {/* 频道选择下拉框 */}
            <Form.Item
              label="频道"
              name="channel_id"
              rules={[{ required: true, message: "请选择文章频道" }]}
            >
              <Select placeholder="请选择文章频道" style={{ width: 400 }}>
                {channelList.map((item) => {
                  return (
                   
                    <Option key={item.id} value={item.id}>
                      {item.name}
                    </Option>
                  );
                })}
              </Select>
            </Form.Item>
  
            {/* 封面上传 */}
            <Form.Item label="封面">
            <Form.Item name="type">
              <Radio.Group onChange={onRadioChange}>
                <Radio value={1}>单图</Radio>
                <Radio value={3}>三图</Radio>
                <Radio value={0}>无图</Radio>
              </Radio.Group>
            </Form.Item>
            { imageType > 0 && (
                <Upload
                name="image"
                // 上传列表样式
                listType="picture-card"
                // 文件列表, 用于显示已上传的文件
                showUploadList
                //  图片上传地址
                action={'http://geek.itheima.net/v1_0/upload'}
                onChange={onUploadChange}
                // 最多上传图片数量， 限制图片数量
                maxCount={imageType}
                fileList={imageList}
              >
                <div style={{ marginTop: 8 }}>
                  <PlusOutlined />
                </div>
              </Upload>
            ) }
            
          </Form.Item>
  
            {/* 内容编辑器 */}
            <Form.Item
              label="内容"
              name="content"
              rules={[{ required: true, message: "请输入文章内容" }]}
            >
              <ReactQuill
                className="publish-quill"
                theme="snow"
                placeholder="请输入文章内容"
              />
            </Form.Item>
  
            <Form.Item wrapperCol={{ offset: 4 }}>
              <Space>
                <Button size="large" type="primary" htmlType="submit">
                  发布文章
                </Button>
              </Space>
            </Form.Item>
          </Form>
        </Card>
      </div>
    );
  }